<template>
	<view class="wrap">
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input type="text" placeholder-class="line" v-model="name" placeholder="请填写收货人姓名" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="text" placeholder-class="line" v-model="tel"  placeholder="请填写收货人手机号" />
			</view>
			<view class="item" @click="value = true"   v-model="value">
				<view class="left">所在地区</view>
				<city-select v-model="value" @city-change="cityChange"></city-select>
				<input disabled type="text"  :value="input"  placeholder-class="line" placeholder="省市区县、乡镇等" />
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea type="text" v-model="addressDetail" placeholder-class="line" placeholder="街道、楼牌等" />
			</view>
			<!-- <view class="site-clipboard">
				<textarea placeholder-class="line" value="" placeholder="粘贴文本,可自动识别姓名和地址等" />
				<view class="clipboard">
					地址粘贴板
					<u-icon name="arrow-down" class="icon" :size="20"></u-icon>
				</view>
			</view> -->
		</view>
		<view class="bottom">
<!-- 			<view class="tag">
				<view class="left">标签</view>
				<view class="right">
					<text class="tags">家</text>
					<text class="tags">公司</text>
					<text class="tags">学校</text>
					<view class="tags plus"><u-icon size="22" name="plus"></u-icon></view>
				</view>
			</view> -->
			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">提醒：每次下单会默认推荐该地址</view>
				</view>
				<view class="right"><u-switch active-color="#FF9900" v-model="checked" active-value="1" inactive-value="0" @change="setDefault"></u-switch></view>
			</view>
			<u-button type="info" class="custom-style" :ripple="true" ripple-bg-color="#909399" @click="onSave">修改</u-button>
			<u-button type="warning" class="custom-style u-m-t-30" :ripple="true" @click="onDelete">删除</u-button>
		</view>

	</view>
</template>

<script>
	import citySelect from './u-city-select.vue';
export default {
	components: {
		citySelect
	},
	data() {
		return {
			goodsId:null,
			height: 30,
			bgColor: this.$u.color.bgColor,
			marginTop: 30,
			marginBottom: 30,
			value: false,
			input: '',
			name:'',
			addressDetail:'',
			tel:'',
			province:'',
			city:'',
			county:'',
			checked:'',
		};
	},
	onLoad(option) {   //onLoad页面加载
		this.addressId = option.id
		this.addressdetail()
	},
	methods: {
		setDefault(checked) {
			
		},
		cityChange(e) {
			this.input = e.province.label + '-' + e.city.label + '-' + e.area.label;
		},
		async addressdetail(){
			const res = await this.$u.api.getAddressDetail(this.addressId)
			console.log(res)
			this.name = res.name
			this.tel = res.phone
			this.province = res.province
			this.addressDetail = res.address
			this.city = res.city
			this.county = res.county
			this.checked = res.is_default  ? true :  false
			this.input = res.province+'-'+res.city+'-'+res.county
		
		},
		async onSave(){
			// console.log(this.checked ? 1 :  0)
			const dizhi = this.input.split('-')
			const params = {
				 name:this.name,
				 address:this.addressDetail,
				 phone:this.tel,
				 province:dizhi[0],
				 city:dizhi[1],
				 county:dizhi[2],
				 is_default:this.checked,
			 }
			// 跳转 到来源页
			const res = await this.$u.api.editAddress(this.addressId,params)
			this.$u.toast('修改成功')
			const back_url = uni.getStorageSync('back_url') || 'pages/index/index'
			setTimeout(()=>{
				this.$u.route({
					type:'redirect',    
					url:'/pages/center/address'
				})
			},500)
		},
		async onDelete(){
			await this.$u.api.delAddress(this.addressId)
			this.$u.toast('删除成功')
			this.$u.route({
				type:'redirect',    //跳过修改页，直接返回第一次进来的路径
				url:'/pages/center/address'
			})
		}	
	}
};
</script>

<style lang="scss" scoped>
	.custom-style {
		background: #FF9900;
			color: #fff;
			width: 400rpx;
			top:50rpx
		}
/deep/ .line {
	color: $u-light-color;
	font-size: 28rpx;
}
.wrap {
	background-color: #f2f2f2;
	.top {
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
			}
		}
		
		.address {
			padding: 20rpx 0;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 28rpx;
		.tag {
			display: flex;
			.left {
				width: 160rpx;
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}
				.plus {
					//padding: 10rpx 0;
				}
			}
		}
		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;
			.tips {
				font-size: 24rpx;
			}
			.right {
			}
		}
	}
}
</style>
